<template>
	<view>
		<my-list 
		@chooseImg="chooseImg"
		@editUsername="editUsername"
		@editMobile="editMobile"
		@editName="editName"
		@chooseSex="chooseSex"
		 :list="list"></my-list>
		<button class="logout-btn" @click="logout" type="default">退出登录</button>
		
		<view v-if="isUpdate" class="update-box row">
			<input v-model="content" class="my-input" type="text">
			<text class="update-btn" @click="submitUpdate">修改</text>
		</view>
	</view>
</template>

<script>
	import list from '@/config/user-list-bar.js'
	import api from '@/api/system.js'
	import commonApi from '@/api/common.js'
	
	import {mapState} from 'vuex'
	const sex = ['男', '女']//0男 1女
	
	export default {
		data() {
			return {
				list:list(),
				content:'',//输入内容
				isUpdate:false ,//是否显示修改输入框
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		onLoad() {
			this.$util.isLogin()
		},
		onBackPress() {
			//返回值为true的时候，不执行默认的返回值
			if(this.isUpdate){
				this.isUpdate = false
				return true //不会返回上一页
			}
		},
		methods: {
			//更换头像按钮
			chooseImg(obj){
				//1.选择本地图片或从相册拍摄
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) =>{
						console.log(res.tempFilePaths);
						//2调用接口将对应的照片上传到服务器(后台接口)
						 const filePath = res.tempFilePaths[0]
						 uni.showLoading({
							title:'更换头像中',
							mask:true
						 })
						 
						const{status,msg,path} = await commonApi.uploadImg(filePath)
						if(status === 1){
							//更新用户数据
							this.userInfo.imageUrl = path
							console.log(this.userInfo.imageUrl);
							this.updateUserInfo()
						}else{
							uni.hideLoading()
							this.$util.msg('头像更新失败，请重试')
						}
					}
				});
			},
			//修改登录名
			editUsername(obj){
				this.$util.msg('用户名不允许修改')
			},
			//修改手机号
			editMobile(obj){
				
				const data = JSON.stringify({userInfo:this.userInfo})
				uni.navigateTo({
					url: `/pages/auth/bind-mobile?title=修改手机号&data=`+data,
					animationType:'slide-in-bottom'
				})
			},
			
			//修改姓名
			editName(obj){
				this.isUpdate = true
				this.content = obj.text
			},
			//修改性别
			chooseSex(obj){
				uni.showActionSheet({
					itemList: sex,//0男 1女
					success: (res) =>{
						this.userInfo.sex = res.tapIndex
						console.log(res.tapIndex);
						// 更新数据
						this.updateUserInfo()
					}
				});
			},
			submitUpdate(){
				const content = this.content.trim()
				if(!content){
					this.$util.msg('不能为空，请重新填')
					return
				}
				if(this.userInfo.nickName === content){
					this.$util.msg('与上次内容不能相同')
					return
				}
				uni.showLoading({
					mask:true
				})
				// 将更改过的值保存
				this.userInfo.nickName = content
				//调用更新接口
				this.updateUserInfo()
				//关闭弹窗
				this.isUpdate = false
			},
			//退出登录
			logout(){
				uni.showModal({
					title:'确定退出登录?',
					content:'退出后不会删除任何历史数据',
					success: (res) => {
						if(res.confirm){
							this.$util.msg('成功退出登录')
							this.$store.commit('logout')
							setTimeout(() =>{
								this.navBack()
							},300)
						}
					}
				})
			},
			//更新用户状态
			async updateUserInfo(){
				console.log(this.userInfo);
				//调用后台接口更新用户信息
				await api.updateUserInfo({userInfo:this.userInfo})
				//更新状态
				this.$store.commit('setToken',{userInfo:this.userInfo})
				//重新渲染
				
				this.list = list()
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $mxg-color-grey;
	}
	
	.logout-btn{
		margin-top: 39rpx;
		background-color: #FFFFFF !important;
		color: #464646;
		border-radius: 10rpx;
		&::after{
			border: 0;
		}
	}
	.button-hover{
		background-color: $mxg-color-grey !important;
	}
	.update-box{
		z-index: 90;
		position: fixed;
		top: var(--window-top);
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #fff;
	}
	.my-input{
		z-index: 100;
		width: 650rpx;
		border: $mxg-underline;
		height: 90rpx;
		font-size: 35rpx;
		padding: 0 20rpx;
		margin: 0 10rpx;
	}
	.update-btn{
		width: 100rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #5681e3;
		border-radius: 10rpx;
	}
</style>